import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    FlatList,
    TouchableOpacity
} from 'react-native';
import StorageUtil from '../util/StorageUtil';
import Constants from '../constant/Constants';
import TopBar from '../component/TopBar';

export default class Home extends Component {
    static navigationOptions = {
        title: '首页'
    }

    constructor(props) {
        super(props);
        this.state = {
            data: [],
        }
    }
    render() {
        return (
            <View style={Styles.constainer}>
                <TopBar title='首页'/>
                <FlatList
                    data={this.state.data}
                    renderItem={this.renderItem.bind(this)}
                    ItemSeparatorComponent={this.renderSpace.bind(this)}
                />
            </View>
        );
    }

    renderSpace() {
        //绘制分割线
        return (
            <View style={Styles.itemSpaceStyle} />
        );
    }

    renderItem(row) {
        //绘制列表cell
        const { item, index } = row;
        return (
            <TouchableOpacity style={Styles.itemContent} onPress={() => this.itemClick(item, index)}>
                <Text style={Styles.itemStyle}>
                    {item.title}
                </Text>
            </TouchableOpacity>
        );
    }

    itemClick(item, index) {
        const { navigate } = this.props.navigation;
        if (item.key === 7) {
            //判断是否登录
            StorageUtil.get(Constants.KEY.KEY_LOGIN_INFO).then((result) => {
                if (result) {
                    navigate('Tabs');
                } else {
                    navigate(item.target, { title: item.title })
                }
            }).catch((error) => {
                console.log(error);
            });

        } else {
            navigate(item.target, { title: item.title })
        }

    }

    componentDidMount() {
        //组件加载完成
        const showList = [
            { key: 9, title: '本地存储', target: 'StorageDemo' },
            { key: 8, title: "PromiseDemo", target: 'PromiseDemo' },
            { key: 5, title: "自定义button", target: 'RNBtnDemo' },
            { key: 1, title: "FlexBox布局简单使用", target: 'FlexDemo' },
            { key: 2, title: "自定义TopBar", target: 'TopBarDemo' },
            { key: 3, title: "ES6学习", target: 'ES6Demo' },
            { key: 4, title: "动画", target: 'AnimationDemo' },
            { key: 6, title: "网络请求", target: 'RequestDemo' },
            { key: 7, title: "车智赢+", target: 'LoginPage' }
        ];
        this.setState({
            data: showList
        });
    }

}

const Styles = StyleSheet.create({
    constainer: {
        flex: 1,
    },
    itemContent: {
        height: 45,
        justifyContent: 'center',
        backgroundColor: '#ffff00',
    },
    itemStyle: {
        textAlign: 'center',
        paddingLeft: 10
    },
    itemSpaceStyle: {
        backgroundColor: '#000000',
        height: 1,
    }
});